.view-control-panel {
  border-right: 1px solid var(--color-border-2);
  height: 100%;
  max-height: 100vh;
  position: fixed;
  width: 230px;

  .view-control-item {
    margin: 5px;
  }

  .sub-title {
    font-weight: bold;
    margin: 10px;
  }

  .template-container {
    margin: 10px;

    .template-item {
      align-items: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 5px 0;

      > .img-container {
        border: 6px solid var(--color-border-1);
        display: flex;
        height: 60px;
        justify-content: center;
        margin: 5px 10px;
        padding: 3px;
        width: 60%;
      }

      img {
        height: 100%;
      }
    }
  }
}

.view-container-title {
  border-bottom: 1px solid var(--color-border-2);
  padding: 5px;
}

.view-container-body {
  padding: 5px;
}
